import React, { useEffect, useState } from 'react';
import './PrescriptionManage.css';
import { Table, Modal } from 'antd';
import { FileTextOutlined } from '@ant-design/icons';
import axios from 'axios';


export default function IntegratedManage() {
    const [detailModalOpen, setEditModalOpen] = useState(false)  // 编辑弹窗
    const detail = async (id) => {  // 详情按钮
        setEditModalOpen(true)
        await axios.get('http://8.148.7.123:8000/recipel/infobyid', {
            params: {
                id: id,
            }
        }).then(res => {
            // console.log(res.data.data[0])
            const data = JSON.parse(res.data.data[0].recipel.replace(/'/g,'"'))
            // console.log(data)
            setDetailTableData(()=>{
                return data.map(item => {
                    return {
                        id: item.id,
                        type: item.sort,
                        name: item.drugsname,
                        img: item.img,
                        spec: item.type,
                        price: res.data.data[0].price,
                        num: item.count,
                        time: item.endtime,
                        remark: item.other,
                    }
                })
            })
            
        })
    }

    const detailOk = () => {  // 详情弹框确认按钮
        setEditModalOpen(false)
    }

    const detailCancel = () => {  // 详情弹框取消按钮
        setEditModalOpen(false)
    }
    // 表格列配置
    const columns = [
        {
            title: '医生头像',
            dataIndex: 'head',
            render: (text, record) => (
                <div>
                    <img src={text} alt="医生头像" style={{ width: '50px', height: '50px' }} />
                </div>
            )
        },
        {
            title: '医生姓名',
            dataIndex: 'name',
        },
        {
            title: '科室',
            dataIndex: 'department',
        },
        {
            title: '处方金额',
            dataIndex: 'price',

        },
        {
            title: '操作',
            dataIndex: 'operate',
            render: (text, record) => (
                <div>
                    <FileTextOutlined className='detail_icon' onClick={() => detail(record.id)} />
                </div>
            )
        },

    ];
    // 处方详情列配置
    const detailColumns = [
        {
            title: '药品类型',
            dataIndex: 'type',
        },
        {
            title: '药品名称',
            dataIndex: 'name',
        },
        {
            title: '药品图片',
            dataIndex: 'img',
            render: (text, record) => (
                <div>
                    <img src={text} alt="药品图片" style={{ width: '50px', height: '50px' }} />
                </div>
            )
        },
        {
            title: '药品规格',
            dataIndex: 'spec',
        },
        {
            title: '药品单价',
            dataIndex: 'price',
        },
        {
            title: '药品数量',
            dataIndex: 'num',
        },
        {
            title: '有效期',
            dataIndex: 'time',
        },
        {
            title: '用量备注',
            dataIndex: 'remark',
        },
    ]
    const [tableData, setTableData] = useState([])  // 表格数据
    const [detailTableData, setDetailTableData] = useState([
        
    ]);

    // 获取表格数据
    const getTableData = () => {
        axios.get('http://8.148.7.123:8000/recipel/list', {
            params: {
                page: 1,
                size: 100,
            }
        }).then(res => {
            // console.log(res.data)
            setTableData(() => {
                return res.data.data.map(item => {
                    return {
                        ...item,
                        price: item.price.toFixed(2),  // 金额保留两位小数
                    }
                })
            })
        }).catch(err => {
            console.error(err)
        })
    }

    useEffect(() => {
        getTableData();
    }, [])  // 页面加载时获取表格数据
    return <div>
        {/* 处方详情弹框 */}
        <Modal title="处方详情" width={800} maskClosable={false} open={detailModalOpen} onOk={detailOk} onCancel={detailCancel} cancelText='取消' okText='确定'
            footer={
                <div>
                    总价：{detailTableData[0]?.price * detailTableData[0]?.num}元
                </div>
            }
        >
            <Table
                bordered
                columns={detailColumns}
                dataSource={detailTableData}
                rowKey={'id'}
                size='small'
                pagination={false}
            />
        </Modal>
        <Table
            bordered
            columns={columns}
            dataSource={tableData}
            rowKey={'id'}
            size='small'
            scroll={{ y: 500 }}
        />
    </div >
}